// Main Wrapper
.wrapper{
    position: relative;
    top: 0;
    height: 100vh;

    // Content Header
    .content-header{
        font-weight: 400;
        letter-spacing: 0.5px;
        font-size: 1.6rem;
        font-family: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        margin-top: 1.5rem;
        margin-bottom: 0.25rem;
        text-transform: capitalize;
        color: #454545;
    }
    .content-sub-header{
        font-family: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 0.9rem;
    }

    // Collapsed Navigation
    &.nav-collapsed{
        .app-sidebar{
            width:60px;
            &:hover{
                width: 250px;
                .nav li.has-sub > a:after{
                    display: inherit;
                }
                .menu-title, .badge{
                    display: inline-block;
                }
                .logo .text{
                    display: inline-block;
                }
                .nav-toggle{
                    display: block !important;
                }
            }
            .menu-title{
                display: none;
            }
            .badge{
                display: none;
            }
            .logo .text{
                display: none;
            }
            .nav-toggle{
                display: none !important;
            }
            .nav-close{
                display: none !important;
            }
        }

        .navbar{
            .navbar-header{
                padding-left: 50px;
            }
        }
        .main-panel{
            .main-content{
                padding-left: 60px;
            }
        }
        footer{
            padding-left: 60px;
        }
    }

    // Collapsed Sidebar Menu
    &.menu-collapsed{
        .app-sidebar:not(:hover),.off-canvas-sidebar:not(:hover){
            .navigation li{
                > a,.has-sub > a{
                    padding: 7px 0 7px 0;
                }
                &.has-sub > a{
                    &:after{
                        display: none;
                    }
                }
                &.nav-collapsed-open{
                    > a{
                        // background-color: #ffffff;
                        box-shadow: 0px 6px 14px 2px rgba(0, 0, 0, 0.2);
                        border-radius: 50%;
                        padding: 4px 0px 4px 4px;
                        margin-left: 8px;
                        margin-right: 12px;
                        i{
                            color: theme-color("danger") !important;
                        }
                    }
                }
            }
            .navigation > li{
                >a{
                    padding: 4px;
                    margin-left: 8px;
                    margin-right: 12px;
                }

                &.active{
                 ~.nav-collapsed-open{
                        > a{
                            background-color: transparent !important;
                            >i{
                                color: $white !important;
                            }
                        }
                    }
                }
            }
            &[data-background-color="white"]{
                .navigation{
                    li.nav-collapsed-open{
                        a{
                            @include gradient-directional(#fc00ff, #00dbde);
                            color: $white;
                            i{
                                color: $white !important;
                            }
                        }
                    }
                }
            }
        }
    }

    // Sidebar Menu Animation
    .app-sidebar:not(:hover),.off-canvas-sidebar:not(:hover){
        .navigation li{
            &.nav-collapsed-open{
                > a{
                    background-color: #ffffff;
                    transition: background-color 0.4s ease-in;
                }
            }
        }
        // Menu anchor colors
        &[data-background-color="white"]{
            @include set-active-gradient-color(#fc00ff, #00dbde);
            @include set-active-anchor-color($black);
        }
    }
    .app-sidebar:hover,.off-canvas-sidebar:hover{
        &[data-background-color="white"]{
            .navigation{
                li.nav-collapsed-open{
                    a{
                        color: $black;
                        i{
                            color: $black;
                        }
                    }
                }
            }
        }
    }
    .app-sidebar,.off-canvas-sidebar{
        &:not([data-background-color="white"]){
            &:not(:hover){
                @include set-active-anchor-color(#FF4961);
            }
        }
        &[data-background-color="white"]{
            .navigation{
                li.nav-collapsed-open{
                    >a{
                        background: rgba(200, 200, 200, 0.2);
                    }
                }
            }
        }
    }

    // Large Sidebar active dot position
    &.sidebar-lg{
        .app-sidebar,.off-canvas-sidebar{
            .navigation{
                li.active{
                    a{
                        padding-left: 75px;
                        &:before{
                            left: 25%;
                        }
                    }
                }
            }
        }
    }
}

// Navbar
.bootstrap-navbar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    display: block;
    z-index: 1;
    color: #fff;
    font-weight: 200;
    background-size: cover;
    background-position: center center;
}

// Sidebar Menu
.app-sidebar,
.off-canvas-sidebar{
    font-family: $font-family-base;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 250px;
    height: 100vh;
    @include sidebar-shadow();
    -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
    transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
    transform: translate3d(0,0,0);
    white-space: nowrap;
    visibility: visible;

    // Hide Animation
    &.hide-sidebar{
        transition: transform .4s cubic-bezier(.25,.8,.25,1);
        transform: translate3d(-100%,0,0);
    }

    // Menu Sidebar Content
    .sidebar-content{
        position: relative;
        height: calc(100vh - 90px);
        overflow: auto;
        z-index: 4;
    }

    // Logo Image
    .logo-img{
        width: 38px;
        display: inline-block;
        margin-right: 15px;
        img{
            width: 38px;
        }
    }

    // Settings
    .user-settings-wrap{
        padding: 20px 0;
        border-top: 1px solid rgba(200,200,200, 0.3);
        border-bottom: 1px solid rgba(200,200,200, 0.3);

        .user-img{
            border: 4px solid rgba(200,200,200, 0.3);
        }
    }

    // Main Navigation
    .navigation{
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;

        li{
            position: relative;
            display: block;
            a{
                font-weight: 300;
                letter-spacing: 0.6px;
            }

            &.has-sub{
                > a:after{
                    content: '\e929';
                    font-family: 'feather';
                    font-size: 1rem;
                    display: inline-block;
                    position: absolute;
                    right: 1.75rem;
                    top: 10px;
                    -webkit-transform: rotate(0);
                    -moz-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -o-transform: rotate(0);
                    transform: rotate(0);
                    transition: -webkit-transform .2s ease-in-out;
                }
                > a{
                    margin-bottom: 0;
                    font-size: 0.95rem;
                    font-weight: 300;
                    letter-spacing: 0.6px;
                    span.menu-title{
                        font-size: 0.95rem;
                    }
                }
                &.open{
                    .menu-content{
                        a{
                            font-size: 0.85rem;
                        }
                    }
                }
                .has-sub{
                    &.open{
                        .menu-content{
                            a{
                                font-size: 0.85rem;
                            }
                        }
                       > a{
                        background: none;
                            &:before {
                                content: '';
                                display: block;
                                width: 7px;
                                height: 7px;
                                border-radius: 50%;
                                background-color: #fff;
                                border-color: #fff;
                                position: absolute;
                                left: 46px;
                                top: 21px;
                                transform: translate(-10px, -50%);
                                opacity: 1;
                                transition: all 0.2s ease;
                            }
                        }
                        &:hover > a{
                            background: rgba(200, 200, 200, 0.2);
                        }
                    }
                }
                a{
                    span{
                        font-size: 0.85rem;
                    }
                }
            }
            &.open{
                > a:after{
                    -webkit-transform: rotate(90deg);
                    -moz-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    -o-transform: rotate(90deg);
                    transform: rotate(90deg);
                }
                > a{
                    background: rgba(200, 200, 200, 0.2);

                }
            }

            &.active{
                a{
                    background: #ffffff;
                    color: theme-color("danger") !important;
                    padding-left: 70px;
                    /* -webkit-transition: padding 0.3s ease;
                    transition: padding 0.3s ease; */
                    box-shadow: 0px 6px 14px 2px rgba(0, 0, 0, 0.2);
                      font-weight: 400;
                        font-size: 0.85rem;
                    &:before {
                        content: '';
                        display: block;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: #FA626B;
                        border-color: #FA626B;
                        position: absolute;
                        left: 28%;
                        top: 50%;
                        transform: translate(-10px, -50%);
                        opacity: 1;
                        transition: all 0.2s ease;
                    }
                    span{
                        font-weight: 400;
                        font-size: 0.85rem;
                    }
                }
                &:hover > a{
                    background: #FFFFFF;
                }
            }
            
            // Badge 
            a{
                position: relative;
                span.badge{
                    position: absolute;
                    right: 3rem;
                }
            }
            
            > a{
                display: block;
                overflow: hidden;
                line-height: $font-size-base * 2;
                padding: 7px 10px 7px 14px;
                margin: 10px 13px;
                border-radius: 3rem;
                color: $black;
                // transition: all 300ms linear;
            }

            &:not(.open){
                > ul{
                    display: none;
                }
            }

            &:hover > a{
                background: rgba(200, 200, 200, 0.2);
            }

            ul{
                padding: 0;
                margin: 0;
                overflow: hidden;
                font-size: 1rem;

                li{
                    a{
                        display: block;
                        padding: 5px 18px 5px 55px;
                        margin: 8px 13px;
                    }
                }
            }
        }

        >li.active{
            > a{
                background: #ffffff;
                color: theme-color("danger") !important;
                padding-left: 14px;
                box-shadow: 0px 6px 14px 2px rgba(0, 0, 0, 0.2);
                &:before {
                    color: theme-color("danger") !important;
                    content: none;
                }
                i{
                    color: theme-color("danger") !important;
                }
            }
            &:hover > a{
                background: #FFFFFF;
            }
        }
        
        .menu-title{
            margin: 0;
            font-size: 0.95rem;
            font-weight: 300;
            letter-spacing: 0.6px;
            opacity: 1;
            height: auto;
            -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
            transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
        }

        .badge.badge-pill{
            padding: 4px 8px;
            font-weight: 300;
            -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
            transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
        }

        i{
            font-size: 18px;
            float: left;
            margin-right: 10px;
            margin-left: 1px;
            line-height: 2rem;
            width: 30px;
            text-align: center;
            color: #a9afbb;
        }
    }

    // Sidebar Menu Background Color & Image
    .sidebar-background{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 100%;
        display: block;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center center;

        &:after{
            position: absolute;
            z-index: 3;
            width: 100%;
            height: 100%;
            content: "";
            display: block;
            background: #FFFFFF;
            opacity: .93;
        }
    }

    // Logo
    .logo{
        position: relative;
        padding: 18px 15px 18px 10px;
        z-index: 4;

        p{
            float: left;
            font-size: 20px;
            margin: 10px 10px;
            color: $white;
            line-height: 20px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .logo-text{
            text-transform: uppercase;
            padding: 5px 0;
            display: block;
            font-size: 1.6rem;
            letter-spacing: 2px;
            color: $black;
            text-align: left;
            font-weight: 400;

        }
    }

    // Sidebar menu overlay
    &:after,
    &:before{
        display: block;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
    }

    // Sidebar menu overlay opacity
    &:before{
        opacity: .33;
    }

    // Sidebar menu overlay z-index & opacity
    &:after{
       z-index: 3;
       opacity: 1;
    }

    &[data-image]:after,
    &.has-image:after{
        opacity: .77;
    }

    // Background colors
    &[data-background-color="white"]{
        @include set-background-color($white);
        @include set-active-gradient-color(#fc00ff, #00dbde);
        .navigation{
            li.active{
                a{
                    color: $white !important;
                    &:before{
                        background-color : $white;
                    }
                }
                i{
                    color: $white !important;
                }
            }
        }
    }
    &[data-background-color="black"]{
        @include set-background-color($black);
    }
    &[data-background-color="primary"]{
        @include set-background-color(theme-color("primary"));
    }
    &[data-background-color="info"]{
        @include set-background-color(theme-color("info"));
    }
    &[data-background-color="success"]{
        @include set-background-color(theme-color("success"));
    }
    &[data-background-color="warning"]{
        @include set-background-color(theme-color("warning"));
    }
    &[data-background-color="danger"]{
        @include set-background-color(theme-color("danger"));
    }

    // Gradient Background Colors
    &[data-background-color="aqua-marine"]{
        @include set-gradient-background-color(#1488cc, #2b32b2);
    }
    &[data-background-color="sublime-vivid"]{
        @include set-gradient-background-color(#fc466b, #3f5efb);
    }
    &[data-background-color="crystal-clear"]{
        @include set-gradient-background-color(#159957, #155799);
    }
    &[data-background-color="timber"]{
        @include set-gradient-background-color(#fc00ff, #00dbde);
    }


    // Menu anchor colors
    &[data-background-color="white"]{
        @include set-anchor-color($black);
    }
    &[data-background-color="black"]{
        @include set-anchor-color($white);
    }
    &[data-background-color="red"]{
        @include set-anchor-color($white);
    }

    // Logo Text Color
    &[data-background-color="white"]{
        @include set-logo-text-color($black);
    }

    // User settings text color
    &[data-background-color="white"]{
        @include set-user-settings-text-color($black);
    }    

    &[data-color="blue"]{
        @include set-background-color-button(theme-color("info"));
    }
    &[data-color="green"]{
        @include set-background-color-button(theme-color("success"));
    }
    &[data-color="orange"]{
        @include set-background-color-button(theme-color("warning"));
    }
    &[data-color="red"]{
        @include set-background-color-button(theme-color("danger"));
    }
    &[data-color="purple"]{
        @include set-background-color-button(theme-color("primary"));
    }
}

// Sidebar Menu Header
.sidebar-header{
    a.nav-toggle{
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        right: 18px;
        top: 30px;
        color: rgba(255, 255, 255, 0.55);
    }
    a.nav-close{
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        right: 14px;
        top: 32px;
        color: white;
    }
}

// Content Area
.main-panel{
    position: relative;
    z-index: 2;
    float: right;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    @include transform-translate-x(0px);
    @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));

    .main-content{
        position: relative;
        min-height: calc(100% - 123px);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    div{
        .footer{
            border-top: 1px solid #e7e7e7;
        }
    }
    > .navbar{
        margin-bottom: 0;
    }
}

// Navigation
.bootstrap-navbar .navigation{
    margin-top: 20px;
    float: none;
}

// Small sidebar menu
.sidebar-sm{
    .app-sidebar{
        width: 220px;
    }
}
//  Large sidebar menu
.sidebar-lg{
    .app-sidebar{
        width: 280px;
    }
}